<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>

    .title{
        color: #333;
        line-height: 2;
    }

    .title span{
        background: linear-gradient(to right,#ec695c,#61c454) no-repeat right bottom;
        background-size:0px 2px;
        transition: background-size 1300ms;
    }

    .title span:hover{
        /*这个没生效？？？*/
        background-position-x: left;

        background-position: left bottom;

        background-size: 100% 2px;
    }
</style>

<h2 class="title">
    <span>十年后，CSS的技巧老实说，有时候不一定是懂的才做出来效果，一个无心的或者写错了也可能做出特别的效果：</span>
</h2>
</body>
</html>
